<template>
<!-- 根部必须有一个div：包含所有内容 -->
  <div>
      <Navigation :username = "username"></Navigation>

      <div class='login-page'>
        <div class='login-window'>

          <div class='login-state'>
            {{state}}
          </div>

          <div class='login-item'>
            <el-input v-model="input_username" placeholder="请输入昵称"></el-input>
          </div>

          <div class='login-item'>
            <el-input v-model="input_password" placeholder="请输入密码" show-password></el-input>
          </div>

          <div class='login-item'>
            <el-button type="primary" @click="login">登录</el-button>
          </div>

        </div>
      </div>

  </div>
</template>



<style>
.login-page{
    width: 100vw;
    height: calc(100vh - 56px);
    margin: 0px;
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content:center;
}
.login-window{
  width: 500px;
  height: 300px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.658);
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content:center;
}
.login-item{
  width: 300px;
  margin: 10px 0px;
  display: flex;
  flex-direction:column;
}
.login-state{
  width: 300px;
  height: 10px;
  color: #F56C6C;
  font-size:12px;
  display: flex;
  flex-direction:row;
}
</style>


<script>
import Navigation from "../../components/Navigation.vue"
import api from '../../utils/api.js'

export default {

  // 名字
  name: 'Login',

  // 数据
  data(){
    return {
      input_username:'',
      input_password:'',
      username:'',
      userid:'',
      state:'',
    }
  },

  // 引入(注册)组件
  components:{
    Navigation
  },

  // 方法
  methods:{

    // 登录方法 方法名：function(参数){方法体}，
    login:function(){
      var username = this.input_username
      var password = this.input_password
      // 请求后台的登录接口
      var path1 = api.api+"/user/find?username="+ username+"&password="+password
      var path = api.api+"/user/login"
      var json = "a.json"
      //form表单
      let formData = new FormData();
      //参数
      formData.append("username",username);
      formData.append("password",password);
      //axios
      this.axios
      .post(path, formData)
      .then(response=>{
        console.log(response)
        this.state='*'+response.data.state
        if(response.data.state=="登录成功")
        {
          this.username=response.data.users[0].username
          this.userid = response.data.users[0].id

              path = api.api + "/user/record?id=" + this.userid
              this.axios.get(path).then(response => {
                console.log(response)
                // 编程式路由跳转 https://www.cnblogs.com/yangchin9/p/11005187.html
                this.$router.push({ path: '/' })
              })
        }
      }) 
    },

  }
}
</script>